<!--月度公司层面会议统计分析-->
<template>
    <Layout class="menu-left">
        <!--<Menu mode="horizontal" @on-select='lowerStep' :active-name="modaleShow">-->
            <!--<MenuItem :name="1">本年度环保提升项目完成情况</MenuItem>-->
            <!--<MenuItem :name="2">次年环保投入计划</MenuItem>-->
        <!--</Menu>-->
        <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                <FormItem label="企业名称：" prop="order">
                    <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                  :currentOrgId="dataToQuery.companyId"
                                  :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                </FormItem>
                </Col>
               <!-- <Col span="8">
                <FormItem label='年度：' prop='year'>
                    <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                </FormItem>
                </Col>-->
                <Col span="8">
                    <FormItem label="月份：" prop="month" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker> -
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthTo = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                <Button @click="reset" class="ivu-btn-reset">重置</Button>
                <Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                <FormItem label="企业名称：" prop="belongOrgId">
                    <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                  :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label='年度：' prop='year'>
                    <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="项目名称：" prop="projectName" >
                    <Input v-model='dataToQuery.projectName' class="query-form-el"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                </Col>
            </Row>
        </Form>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
				    <div ref="companyContainer" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
        <div class="table-box">
            <Table ref='table' :height='this.Common.tableHeightNum' no-data-text="没有查询到相关数据!"  :loading='pageStatus.loading'
                   :row-class-name="(row,index)=>(index===0)?'table-summary-row':''"
                   border :columns="columns1"  :data="dataTable" >
            </Table>
        </div>
        <!--<Row style="margin-right:10px;">
            <Col span="24" >
            <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>-->
    </Layout>
</template>
<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
	import echarts from 'echarts'
    export default {
        name: "investmentStatistics",
        components:{
            cascaderDom
        },
        data() {
            return{
                ...this.createCommonDataField(),
                columns1: [
					{ title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
					        if(params.row.companyName === '汇总') return h('span', "汇总");
					        return h('span', (params.index) + (this.pagedata.currentPage - 1) * this.pagedata.pageSize);
					}},
					{ key:'companyName',title: '单位名称', fixed: 'left', align: 'center', minWidth: 240 ,render: (h, params) => {
					        if(params.row.companyName === '汇总') return h('span', "");
					        return h('span', params.row.companyName);
					}},
					{ key:'partyMeeting',title: '召开党组织研究环保安全问题（次）',  align: 'center', width: 160  },
                    { key:'companyMeeting',title: '召开公司安委会（次）',  align: 'center', width: 150 },
                    {
                        title: '公司例会（次）',
                        align: 'center',
                        children: [
                            { key:'enRegularMeeting',title: '环保',  align: 'center', width: 100  },
                            { key:'saRegularMeeting',title: '安全',  align: 'center', width: 100  },
                        ]
                    },
                    {
                        title: '开展公司环保安全检查（次）',
                        align: 'center',
                        children: [
                            { key:'enInspect',title: '环保',  align: 'center', width: 100  },
                            { key:'saInspect',title: '安全',  align: 'center', width: 100  },
                        ]
                    },
                    {
                        title: '发现问题及隐患（项）',
                        align: 'center',
                        children: [

                            { key:'enRisk',title: '环保',  align: 'center', width: 100  },
                            { key:'saRisk',title: '安全',  align: 'center', width: 100  },
                        ]
                    },
                    {
                        title: '问题整改情况',
                        align: 'center',
                        children: [
                            { key:'enResolve',title: '环保',  align: 'center', width: 120  },
                            { key:'saResolve',title: '安全',  align: 'center', width: 120  },
                        ]
                    },
                    {
                        title: '开展公司层面环保安全培训（人·次）',
                        align: 'center',
                        children: [

                            { key:'enTrain',title: '环保',  align: 'center', width: 120  },
                            { key:'saTrain',title: '安全',  align: 'center', width: 120  },
                        ]
                    },
                    { key:'total',title: '合计',  align: 'center',fixed: 'right', minWidth:100 },
                ],
                tableHeight:10,
                // 切换标签
                modaleShow:1,
                // api
                queryUrl:Api.reportSafeRptCompanySaEnStatus,
				statistical:{}
            }
        },
        mounted(){
            this.setTableHeight()
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            query() {
                this.dataToQuery.twoLevelOrgId = this.currentUser.twoLevelOrgId?this.currentUser.twoLevelOrgId:undefined
               /* if(!this.dataToQuery.yearDate) {
                    this.dataToQuery.yearDate = new Date();
                }
                if(this.dataToQuery.yearDate) {
                    this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
                }*/
                if(!this.dataToQuery.companyId) {
                    this.dataToQuery.companyId = undefined
                }
                // this.queryAjax();
				this.pageStatus.loading = true
				let data = {
				    startPage: this.pagedata.currentPage,
				    size: this.pagedata.pageSize,
				    conditions: this.dataToQuery
				};
				
				this.$http.post(this.queryUrl, data).then((res) => {
				    if (res.data.status === 201) {
				        this.$Message.error(res.data.msg);
				    }
				    this.dataTable = res.data.data.data;
				    this.pagedata.total = res.data.data.totalSize;
					this.chartStatistical();
				    this.pageStatus.loading = false
				}).catch(e => {
				    this.$Message.error("数据获取失败")
				    this.pageStatus.loading = false
				})
            },
            lowerStep(name) {
                this.modaleShow = name
                if (name == 1) {
                    this.queryUrl = Api.reportEnRptInvestment
                }else{
                    this.queryUrl = Api.reportEnRptInvestmentPlan
                }
                this.setTableHeight()
                this.query();

            },
			
			chartStatistical(){
				this.statistical = {
					companyName:[],
					partyMeeting:[],
					companyMeeting:[],
					enRegularMeeting:[],
					saRegularMeeting:[],
					enInspect:[],
					saInspect:[],
					enRisk:[],
					saRisk:[],
					enResolve:[],
					saResolve:[],
					enTrain:[],
					saTrain:[],
					total:[]
				}
				for (var i = 0; i < this.dataTable.length; i++) {
					let item = this.dataTable[i]
					if(item.companyName == '汇总'){
						this.statistical.companyName.push("北京金隅集团股份有限公司")
					}else{
						this.statistical.companyName.push(item.companyName)
					}
					this.statistical.partyMeeting.push(item.partyMeeting)
					this.statistical.companyMeeting.push(item.companyMeeting)
					this.statistical.enRegularMeeting.push(item.enRegularMeeting)
					this.statistical.saRegularMeeting.push(item.saRegularMeeting)
					this.statistical.enInspect.push(item.enInspect)
					this.statistical.saInspect.push(item.saInspect)
					this.statistical.enRisk.push(item.enRisk)
					this.statistical.saRisk.push(item.saRisk)
					this.statistical.enResolve.push(item.enResolve)
					this.statistical.saResolve.push(item.saResolve)
					this.statistical.enTrain.push(item.enTrain)
					this.statistical.saTrain.push(item.saTrain)
					this.statistical.total.push(item.total)
				}
				let container = echarts.init(this.$refs.companyContainer);
				let option = this.getOption();
				container.setOption(option);
				window.onresize = container.resize;
			},
			getOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['召开党组织研究环保安全问题(次)','召开公司安委会(次)','公司环保例会','公司安全例会',
							'开展公司环保检查','开展公司安全检查','发现环保问题及隐患','发现安全问题及隐患',
							'环保问题整改情况','安全问题整改情况',
							'开展公司层面环保培训','开展公司层面安全培训','合计']
			            },
						color:['#FD5C50','#FF9800', '#FDD835', '#40C4FF', '#FF3E80','#42A5F5', '#FFC310', '#1DE9B6','#6666CC','#66CC66','#CA8EFF','#00FFFF','#C2FF68'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.companyName,
								axisLabel: {
								            interval: 0,
								            formatter:function(value){  
								                var str = ""; 
								                var num = 6; //每行显示字数 
								                var valLength = value.length; //该项x轴字数  
								                var rowNum = Math.ceil(valLength / num); // 行数  
								                if(rowNum > 1) {
								                    for(var i = 0; i < rowNum; i++) {
								                        var temp = "";
								                        var start = i * num;
								                        var end = start + num;
								                        temp = value.substring(start, end) + "\n";
								                        str += temp; 
								                    }
								                    return str;
								                } else {
								                    return value;
								                } 
								            }
								        }
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
			                {
			                    name: '召开党组织研究环保安全问题(次)',
			                    type: 'bar',
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.partyMeeting
			                },
							{
							    name: '召开公司安委会(次)',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.companyMeeting
							},
							{
							    name: '公司环保例会',
							    type: 'bar',
								stack: '公司例会',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.enRegularMeeting
							},
							{
							    name: '公司安全例会',
							    type: 'bar',
								stack: '公司例会',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.saRegularMeeting
							},
							{
							    name: '开展公司环保检查',
							    type: 'bar',
								stack: '开展公司环保安全检查',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.enInspect
							},
							{
							    name: '开展公司安全检查',
							    type: 'bar',
								stack: '开展公司环保安全检查',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.saInspect
							},
							{
							    name: '发现环保问题及隐患',
							    type: 'bar',
								stack: '发现问题及隐患(项)',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.enRisk
							},
							{
							    name: '发现安全问题及隐患',
							    type: 'bar',
								stack: '发现问题及隐患(项)',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.saRisk
							},
							{
							    name: '环保问题整改情况',
							    type: 'bar',
								stack: '问题整改情况',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.enResolve
							},
							{
							    name: '安全问题整改情况',
							    type: 'bar',
								stack: '问题整改情况',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.saResolve
							},
							{
							    name: '开展公司层面环保培训',
							    type: 'bar',
								stack: '开展公司层面环保安全培训(人/次)',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.enTrain
							},
							{
							    name: '开展公司层面安全培训',
							    type: 'bar',
								stack: '开展公司层面环保安全培训(人/次)',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.enTrain
							},
							{
							    name: '合计',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.total
							}
			            ]
			    };
			    return option;
			}
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
</style>
